<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad,onShow } from '@dcloudio/uni-app'
  import { getRegistrationList } from '@/api/training'
  const refundId = ref(0)
  const dataList = ref([])
  const refundType = ref(-1)
  const isRefundBtn = ref(false)
  const param = ref('')
  const bottomPadding = (uni.getSystemInfoSync().screenHeight as number) - (uni.getSystemInfoSync().safeArea.bottom as number)
  onLoad((options:any) => {
    refundId.value = options.id
    refundType.value = options.type
    param.value = options.param
  })
  onShow(() => {
    loadFun()
  })
  const loadFun = () => {
    getRegistrationList({id:refundId.value,orderTypeEnum:refundType.value}).then(res => {
      if(res.code == 200){
        dataList.value = res.data.infos
        isRefundBtn.value = res.data.canApplication
      }else{
        dataList.value = []
      }
    }).catch(err => {
      dataList.value = []
    })
  }
  const refundClick = (data:any) => {
    uni.navigateTo({url:`/pageSignUp/refundsDetails/refundsDetails?id=${data.id}`})
  }

  const resubmit = (data:any) => {
    const params = {
      id:data.id,
      name:data.payInfo.orderTypeEnum == 1 ? data.payInfo.productName : data.payInfo.campName,
      regId:data.payInfo.regId,
      sourceId:data.payInfo.id,
      orderTypeEnum:data.payInfo.orderTypeEnum,
      payTime:data.payInfo.payTime,
      createdTime:data.payInfo.createdTime
    }
    uni.navigateTo({url:`/pageSignUp/refundsForm/refundsForm?params=${JSON.stringify(params)}`})
  }
  const refundSbmitClick = () => {
    uni.navigateTo({url:`/pageSignUp/refundsForm/refundsForm?params=${param.value}`})
  }
</script>

<template>
  <view class="refund-list">
    <xx-title title="退款列表"/>
    <view class="refund-item" @click="refundClick(item)" v-for="(item, index) in dataList" :key="index">
      <view class="refund-title">
        <view class="refund-time">
          申请时间：{{item.createdTime}}
        </view>
        <view class="refund-right" :class="`refund-right-${item.refundApplicationStatusEnum}`">{{item.refundApplicationStatusEnumDesc}}</view>
      </view>
      <view class="refund-body">
        <view class="refund-name">{{item.payInfo?.productName}}</view>
        <view class="refund-body-item">联系人：{{item.contacts}}</view>
        <view class="refund-body-item">联系电话：{{item.contactsPhone}}</view>
      </view>
      <view class="refund-btn">
        <view class="btn">查看详情</view>
        <view class="btn group-registration" v-if="(item.refundApplicationStatusEnum == -3 || item.refundApplicationStatusEnum == -2 || item.refundApplicationStatusEnum == -1) && isRefundBtn" @click="resubmit(item)" >重新申请</view>
      </view>
    </view>


    <view class="bottom-fixed" v-if="isRefundBtn" :style="{paddingBottom:`calc(${bottomPadding}px + 14rpx)`}">
      <view class="seizeASeat"></view>
    </view>
    <view class="bottom-btn"  v-if="isRefundBtn" :style="{paddingBottom:`calc(${bottomPadding}px + 14rpx)`}">
      <view class="btn group-registration" @click="refundSbmitClick">申请退款</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .refund-list{
    width: 100%;
    box-sizing: border-box;
    padding: 1rpx;
    background-color: #F5F5F5;
    min-height: 100vh;
  }
  .refund-item{
    margin: 24rpx 28rpx;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    background-color: #FFFFFF;
    .refund-title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 24rpx;
      border-bottom: 1px solid #F3F3F3;
      .refund-time{
        color:#818496;
        font-size: 24rpx;
      }
      .refund-right{
        font-size: 26rpx;
        color: #FFFFFF;
        padding: 5rpx 15rpx;
        border-radius: 100rpx;
        background: linear-gradient(270deg, #92C75B 0%, #89BA55 100%);
        &--2,&--1{
          background: linear-gradient(270deg, #c75b64 0%, #ba5555 100%);
        }
        &--3{
          background: linear-gradient(270deg, #989898 0%, #989898 100%);
        }
      }
    }
    .refund-body{
      padding: 24rpx 0;
      .refund-name{
        font-size: 28rpx;
        color:#21252E;
        font-weight: 500;
      }
      .refund-body-item{
        padding: 16rpx 0 0 0;
        font-size: 24rpx;
        color: #505363;
        &:last-child{
          padding-bottom: 24rpx;
        }
      }
    }
    .refund-btn{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .btn{
        font-size: 28rpx;
        line-height: 1;
        color: #505363;
        border: 1px solid #ECEEF1;
        box-sizing: border-box;
        padding: 12rpx 24rpx;
        border-radius: 24px;
        margin-left: 20rpx;
      }
    }
  }

  .bottom-fixed{
    padding-top: 14px;
    background-color: #F5F5F5;
    .seizeASeat{
      height: 60rpx;
    }
  }
  .bottom-btn{
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-left: 28rpx;
    padding-right: 28rpx;
    box-sizing: border-box;
    padding-top: 14rpx;
    background-color: #FFFFFF;
    .btn{
      width:100%;
      padding: 16rpx 32rpx;
      margin-right:10rpx;
      text-align: center;
      border-radius: 100rpx;
      box-sizing: border-box;
      border:1rpx solid #92C75B;
      font-size: 28rpx;
      font-weight: 500;
      letter-spacing: 2rpx;
      &:last-child{
        margin-right: 0;
      }
    }
    .danger{
      background: #f54747;
      color: #FFFFFF;
    }
  }

  .group-registration{
    background: #92C75B;
    color: #FFFFFF !important;
  }
</style>
